
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TouchableHighlight } from 'react-native';
import { px2dp } from '../utils/util'
import Header from '../component/header/header'
import PropTypes from 'prop-types'
import server,{api} from '../common/net/server';
import Toast, {DURATION} from 'react-native-easy-toast'
/**
 * 页面公用头部
 */
export default class Payment extends Component {
  static propTypes = {
  }
  constructor(props) {
    super(props)
    /**
     * state(当前组件的默认参数，类似vue的data里面的默认参数)
     */
    let { navigation } = props;
    let orderInfo = navigation.getParam('orderInfo');
    // console.log({ orderInfo });

    this.state = {
      orderInfo: orderInfo
    }
    this.orderPay = this.orderPay.bind(this)
  }

  _renderTitle() {
    let { orderInfo } = this.state;

    if (orderInfo.cp_key === 'jclq') {
      return (
        <View style={{ flexDirection: 'row', padding: px2dp(20), backgroundColor: 'white' }}>
          <View>
            <Image source={{ uri: orderInfo.logo_url }} style={{ width: px2dp(100), height: px2dp(100) }}></Image>
          </View>
          <View style={{ flex: 1, justifyContent: 'center', paddingLeft: px2dp(20), paddingRight: px2dp(20) }}>
            <View style={{ flexDirection: 'row' }}>
              <Text>{orderInfo.name} </Text>
              <Text style={{ paddingLeft: px2dp(20), fontSize: px2dp(20), marginTop: px2dp(5) }}>{orderInfo.bet_numbers}注 {orderInfo.multiple}倍</Text>
            </View>
            <Text style={{ marginTop: px2dp(10) }}>{orderInfo.bunch_type}</Text>
          </View>
          <View style={{ justifyContent: 'center' }}>
            <Text style={{}}>￥{orderInfo.sum_money + '.00'}</Text>
          </View>
        </View>
      )
    } else {
      return (
        <View style={{ flexDirection: 'row', padding: px2dp(20), backgroundColor: 'white' }}>
          <View>
            <Image source={{ uri: 'http://oss.7c6nn.com/cp/20190520/20190520171321_82761034195.png' }} style={{ width: px2dp(100), height: px2dp(100) }}></Image>
          </View>
          <View style={{ flex: 1, justifyContent: 'center', paddingLeft: px2dp(20), paddingRight: px2dp(20) }}>
            <View style={{ flexDirection: 'row' }}>
              <Text>{orderInfo.name} </Text>
              <Text style={{ paddingLeft: px2dp(20), fontSize: px2dp(20), marginTop: px2dp(5) }}>第20190521-0822期</Text>
            </View>
            <Text style={{ marginTop: px2dp(10) }}>7注 1期 1倍</Text>
          </View>
          <View style={{ justifyContent: 'center' }}>
            <Text style={{}}>￥14.00</Text>
          </View>
        </View>
      )
    }
  }
  orderPay(){
    // console.log('333');
    
    let {orderInfo} = this.state;
    server.post(api.jclq.orderPay,{
      order_no: orderInfo.order_no
    })
    .then(res => {
      if(res.res_code){
        this.refs.toast.show(res.res_msg);
        this.props.navigation.popToTop()
      }else{
        throw res.res_msg
      } 
    })
    .catch(err => {
      this.refs.toast.show(err)
    })
  }

  render() {
    let { orderInfo } = this.state;
    return (
      <View style={{ flex: 1, backgroundColor: '#f4f4f4' }}>
        <Header text='支付' goBack={() => { this.props.navigation.goBack() }}></Header>
        <View style={{ flex: 1 }}>
          {this._renderTitle()}
          <View style={{ marginTop: px2dp(20), minHeight: px2dp(100), backgroundColor: 'white', padding: px2dp(20) }}>
            <View style={{ flexDirection: 'row', paddingBottom: px2dp(20), borderBottomWidth: 1, borderColor: '#eee' }}>
              <Text style={{ flex: 1 }}>可用余额</Text>
              <Text style={{ color: 'red' }}>￥{orderInfo.balance}</Text>
            </View>
            <View style={{ paddingTop: px2dp(20) }}>
              <Text style={{ color: '#cdcdcd' }}>您的方案将由合法投注站点出票，如因故未能出票成功，会进行撤单返款处理，请留意出票结果。</Text>
            </View>
          </View>
        </View>
        <View style={{ backgroundColor: 'white', paddingVertical: px2dp(20), paddingHorizontal: px2dp(40) }}>
          <Text style={{ textAlign: 'center', paddingBottom: px2dp(20) }}>
            余额支付
            <Text style={{ color: 'red' }}>￥14.22</Text>
          </Text>
          <TouchableHighlight
            underlayColor='red'
            onPress = {this.orderPay}
          >
            <Text style={{
              textAlign: 'center',
              backgroundColor: 'red',
              borderRadius: px2dp(50),
              paddingVertical: px2dp(20),
              color: 'white',
            }}>确认支付</Text>
          </TouchableHighlight>
        </View>
        <Toast ref="toast"/>
      </View>
    );
  }
}

const styles = StyleSheet.create({})